<template>
  <a-form-item
    :label="item.title"
    :rules="item.rules"
    :name="item.dataIndex"
  >
    <component
      :is="itemContent"
      v-if="itemContent != null"
      :key="Math.random()"
      v-model:item="itemData"
      v-model:form="formData"
    />
  </a-form-item>
</template>
<script lang="ts">
import items from '@/components/RHForm/RHItem/items'
import { defineComponent, markRaw, toRef } from 'vue'
export default defineComponent({
  name: 'RHItem',
  components: {},
  props: {
    form: {
      default: null
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(props) {
    const itemData = toRef(props, 'item')
    const formData = toRef(props, 'form')
    console.log(itemData.value, formData.value)
    let itemContent
    const content = items.getItem(itemData.value.type)
    // const content = items.getItem('Input')
    if (content) {
      itemContent = markRaw(content)
    }
    return {
      itemContent,
      formData,
      itemData
    }
  },
  data() {
    return {}
  },
  created() {
    /**
     * 动态加载组件
     */
  },
  methods: {}
})
</script>

<style scoped></style>
